<template>
	<div>
		<h2>Hello Nuxt3</h2>
		<!-- <Head>
			<Meta name="key" content="key key key"></Meta>
			<Style></Style>
			<Link></Link>
		</Head> -->
		<!-- 内置组件SEO优先级最高 -->
		<Meta name="key" content="key key key"></Meta>
	</div>
</template>

<script setup>
	// 1. 判断diam执行的环境
	/* if (process.server) {
		console.log('运行在 server')
	}

	if (process.client) {
		console.log('运行在 client')
	} */

	// 1. 获取运行时配置
	const runtimeConfig = useRuntimeConfig()
	if (process.server) {
		console.log(runtimeConfig.appKey)
		console.log(runtimeConfig.public.baseURL)
	}

	// 客户端判断
	if (process.client) {
		console.log(runtimeConfig.appKey) // public 外server可以访问, 但是client不能访问
		console.log(runtimeConfig.public.baseURL) // public 中server和client都可以访问
	}

	// 客户端第二种判断
	if (typeof window === 'object') {
		console.log(runtimeConfig.appKey) // public 外server可以访问, 但是client不能访问
		console.log(runtimeConfig.public.baseURL) // public 中server和client都可以访问
	}

	// 3. 获取appConfig
	let appConfig = useAppConfig()
	/* console.log(appConfig.title)
	console.log(appConfig.theme.primary) */

	onMounted(() => {
		document.title = appConfig.title
	})

	// 4. 动态的该app所有的页面添加head的内容
	useHead({
		title: 'app useHead',
		meta: [
			{
				name: 'desc',
				content: '广州宏源科教',
			},
		],
		// 给body添加样式
		bodyAttrs: {
			class: 'abcd',
		},
		script: [
			{
				src: 'http://codercba.com',
				// 将script插入到body中
				body: true,
			},
		],
	})
</script>
